<!--
 * @Author: Wangtao
 * @Date: 2022-08-09 17:23:08
 * @LastEditors: Wangtao
 * @LastEditTime: 2022-09-21 10:22:50
-->
<template>
  <box-ui>
    <template #list>
      <call-nav />
      <card-list />
    </template>
    <template #main>
      <keep-alive>
        <router-view />
      </keep-alive>
    </template>
  </box-ui>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

import boxUi from './uiComponent/index.vue'

import callNav from './component/callNav.vue'

import cardList from './component/cardList.vue'
import { newDate } from '@/common/utils/common'

const zeroize = (num: number) => {
  return (String(num).length === 1 ? '0' : '') + num
}

export default defineComponent({
  name: 'RecentCalls',
  components: {
    boxUi,
    cardList,
    callNav
  },
  // ----------------生命周期-----------------------
  setup() {
    // ----------------传入属性-----------------------
    // ----------------内部属性-----------------------
    const morkList = [
      'MC_icon-yijieting',
      'MC_icon-zhenling',
      'MC_icon-weijieting',
      'MC_icon-yijieting',
      'MC_icon-zhenling',
      'MC_icon-weijieting',
      'MC_icon-yijieting',
      'MC_icon-zhenling',
      'MC_icon-weijieting',
      'MC_icon-yijieting',
      'MC_icon-zhenling',
      'MC_icon-weijieting',
      'MC_icon-yijieting',
      'MC_icon-zhenling',
      'MC_icon-weijieting',
      'MC_icon-yijieting',
      'MC_icon-zhenling',
      'MC_icon-weijieting',
      'MC_icon-yijieting',
      'MC_icon-zhenling',
      'MC_icon-weijieting',
      'MC_icon-yijieting',
      'MC_icon-zhenling',
      'MC_icon-weijieting'
    ]
    // ----------------计算属性-----------------------
    // ----------------监听方法-----------------------
    // ----------------调用方法-----------------------
    const timestampFormat = (timestamp: string) => {
      const callTimstamp = new Date(timestamp).getTime() / 1000
      const tamp: any = newDate().getTime() / 1000
      const curTimestamp = parseInt(tamp, 10) // 当前时间戳
      const timestampDiff = curTimestamp - callTimstamp // 参数时间戳与当前时间戳相差秒数

      const curDate = new Date(curTimestamp * 1000) // 当前时间日期对象
      const tmDate = new Date(callTimstamp * 1000) // 参数时间戳转换成的日期对象

      const Y = tmDate.getFullYear()
      const m = tmDate.getMonth() + 1
      const d = tmDate.getDate()
      const H = tmDate.getHours()
      const i = tmDate.getMinutes()
      if (timestampDiff < 60) {
        // 一分钟以内
        return '刚刚'
      } else if (timestampDiff < 3600) {
        // 一小时前之内
        return Math.floor(timestampDiff / 60) + '分钟前'
      } else if (curDate.getFullYear() === Y && curDate.getMonth() + 1 === m && curDate.getDate() === d) {
        return '今天' + zeroize(H) + ':' + zeroize(i)
      } else {
        const newDate1 = new Date((curTimestamp - 86400) * 1000) // 参数中的时间戳加一天转换成的日期对象
        if (newDate1.getFullYear() === Y && newDate1.getMonth() + 1 === m && newDate1.getDate() === d) {
          return '昨天' + zeroize(H) + ':' + zeroize(i)
        } else if (curDate.getFullYear() === Y) {
          return zeroize(m) + '月' + zeroize(d) + '日 ' + zeroize(H) + ':' + zeroize(i)
        } else {
          return Y + '年' + zeroize(m) + '月' + zeroize(d) + '日 ' + zeroize(H) + ':' + zeroize(i)
        }
      }
    }
    return {
      morkList,
      timestampFormat
    }
  }
})
</script>
<style lang="stylus">
.RecentCalls-box
  .el-scrollbar__bar.is-vertical
    width 4px
    .el-scrollbar__thumb
      background-color var(--mc-gray4-color)
      opacity 1
</style>
<style lang="stylus" scoped>
.detail
  height 100%
  padding 0 24px 0
  .btn
    width 24px
    height 24px
    background red
    display flex
    align-items center
    justify-content center
    margin-left 16px
    background-color var(--mc-gray3-color)
    color rgba(0, 0, 0, 0.88)
    border-radius 4px
    .MC_iconfont
      font-size 16px
  .circular
    border-radius 50%
    color white
  .customer-info
    padding 24px 0 24px
    box-sizing border-box
    .customer-info-box
      padding 16px 20px 16px
      box-sizing border-box
      background-color var(--el-fill-color-lighter)
      .customer-box-bottom
        margin-top 12px
        display flex
        .phone-info
          color rgba(0, 0, 0, 0.88)
        > div
          font-weight 400
          font-size 14px
          margin-right 40px
          color rgba(0, 0, 0, 0.6)
      .customer-box-top
        display flex
        justify-content space-between
        align-items center
        .customer-box-top-left
          display flex
          align-items center
          .name
            font-weight 500
            font-size 20px
          .oprate
            display flex
            .call
              background-color var(--mc-call-color-connect)
            .sms
              background-color var(--mc-call-color-ringing)
</style>
<style lang="stylus" scoped>
.RecentCalls-box
  display flex
  flex-direction row
  height 100%
  .card-list-box
    width 280px
    height 100%
    background var(--el-fill-color-lighter)
    .card-list-tit
      height 44px
      box-sizing border-box
      display flex
      align-items center
      font-style normal
      font-weight 400
      font-size 14px
      padding 0 20px 0
    .card-list-con
      height calc(100% - 44px)
      .card-list-tip::before
        content ''
        left 0
        right 0
        top 0
        bottom 0
        display block
        position absolute
        height 0
        width 90%
        border-bottom 1px dashed rgba(0, 0, 0, 0.26)
        margin auto
        z-index 0
      .card-list-tip
        height 34px
        display flex
        justify-content center
        align-items center
        color rgba(0, 0, 0, 0.26)
        font-weight 400
        font-size 12px
        position relative
        padding 0 16px 0
        > span
          z-index 2
          position relative
          background-color var(--el-fill-color-lighter)
          padding 0 8px 0
      .card-item-box
        height calc(100% - 34px)
        .card-item
          width 100%
          cursor pointer
          box-sizing border-box
          padding 20px 12px 20px
          display flex
          flex-direction column
          position relative
          .card-item-flex
            display flex
            width 100%
            justify-content space-between
            align-items center
          .card-item-top
            margin-bottom 8px
            flex 1
            .name
              font-size 20px
              font-weight 500
              display flex
              flex 1
              max-width 75%
              align-items center
              .text
                flex 1
                word-break keep-all /* 不换行 */
                white-space nowrap /* 不换行 */
                overflow hidden
                text-overflow ellipsis
                width calc(100% - 25px)
                font-size 14px
              .MC_iconfont
                font-size 16px
                margin-right 4px
              .MC_icon-zhenling
                color var(--mc-call-color-ringing)
              .MC_icon-yijieting
                color var(--mc-call-color-connect)
              .MC_icon-weijieting
                color var(--mc-call-color-missed)
            .card-time
              font-size 12px
              font-weight 400
              color rgba(0, 0, 0, 0.38)
          .card-item-bottom
            .address
              font-size 12px
              font-weight 400
              color rgba(0, 0, 0, 0.6)
            .state
              height 18px
              display flex
              align-items center
              justify-content center
              border-radius 9px
              box-sizing border-box
              border 1px solid rgba(229, 233, 235, 1)
              font-size 12px
              font-weight 400
              padding 0 6px 0
      .card-item:after
        content ''
        background var(--mc-call-color-idle)
        display block
        position absolute
        height 100%
        width 2px
        top 0px
        right 0px
        display none
      .card-item:hover
        background-color #fff
        &:after
          display block
</style>
